<template>
  <div>
    <el-card shadow="always">
      <el-form :inline="true" ref="log" :model="log">
        <el-form-item label="账号:" prop="account">
          <el-input type="text" placeholder="账号" v-model="log.account"></el-input>
        </el-form-item>
        <el-form-item label="地区:" prop="location">
          <el-input type="text" placeholder="地区" v-model="log.location"></el-input>
        </el-form-item>
        <el-form-item label="IP:" prop="ip">
          <el-input type="text" placeholder="IP" v-model="log.ip"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dateTime"
            type="datetimerange"
            range-separator="-"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button type="primary" @click="search"><i class="el-icon-search"></i> 搜索</el-button>
          <el-button @click="resetForm('log')"><i class="el-icon-refresh"></i> 重置</el-button>&nbsp;&nbsp;&nbsp;
          <el-dropdown>
            <el-button>更多 <i class="el-icon-arrow-down"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="dels">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card class="box-card">
      <el-table :data="logs" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading"
                ref="multipleTable">
        <el-table-column type="selection" width="55" prop="id"></el-table-column>
        <el-table-column
          width="80"
          label="序号">
          <template slot-scope="scop">
            {{ scop.$index + (currentPage - 1) * pageSize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="姓名" width="130"></el-table-column>
        <el-table-column prop="requestIp" label="IP" width="160"></el-table-column>
        <el-table-column prop="browser" label="浏览器" width="150"></el-table-column>
        <el-table-column prop="browserVersion" label="浏览器版本" width="160"></el-table-column>
        <el-table-column prop="operatingSystem" label="操作系统" width="160"></el-table-column>
        <el-table-column prop="location" label="地区" width="300"></el-table-column>
        <el-table-column prop="loginDate" label="登陆时间" width="160"></el-table-column>
        <el-table-column prop="description" label="描述" width="170">
          <template slot-scope="scope">
            <el-button type="text" style="color: red" v-if="scope.row.description === '密码错误！' || scope.row.description === '账号已被禁用!'">
              <svg t="1649904824589" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5487" width="10" height="10">
                <path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="#F62008" p-id="5488"></path>
              </svg>
              {{ scope.row.description }}
            </el-button>
            <el-button v-else type="text" style="color: black">
              <svg t="1649905087754" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="21693" width="10" height="10">
                <path
                  d="M584.704 998.4H439.296c-228.352 0-413.696-185.344-413.696-413.696V439.296c0-228.352 185.344-413.696 413.696-413.696h145.408c228.352 0 413.696 185.344 413.696 413.696v145.408c0 228.352-185.344 413.696-413.696 413.696z"
                  fill="#9AC524" p-id="21694"></path>
                <path
                  d="M998.4 584.704V439.296c0-228.352-185.344-413.696-413.696-413.696H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 228.352 185.344 413.696 413.696 413.696h145.408c13.312 0 26.624-1.024 38.912-2.048 162.816-61.44 294.912-185.344 368.64-342.016 4.096-22.528 6.144-46.08 6.144-69.632z"
                  fill="#9AC524" p-id="21695"></path>
                <path
                  d="M997.376 414.72c-13.312-217.088-192.512-389.12-412.672-389.12H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 185.344 121.856 342.016 289.792 394.24 23.552 3.072 47.104 4.096 70.656 4.096 324.608 1.024 589.824-250.88 611.328-568.32z"
                  fill="#9EC829" p-id="21696"></path>
                <path
                  d="M584.704 25.6H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 110.592 43.008 210.944 113.664 284.672 74.752 36.864 158.72 57.344 246.784 57.344 307.2 0 556.032-248.832 556.032-556.032 0-65.536-11.264-128-31.744-186.368C835.584 88.064 717.824 25.6 584.704 25.6z"
                  fill="#A2CC2E" p-id="21697"></path>
                <path
                  d="M387.072 871.424c276.48 0 500.736-224.256 500.736-500.736 0-107.52-33.792-206.848-91.136-287.744-61.44-36.864-134.144-57.344-210.944-57.344H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 58.368 12.288 114.688 34.816 164.864 87.04 75.776 201.728 121.856 326.656 121.856z"
                  fill="#A5CF33" p-id="21698"></path>
                <path
                  d="M439.296 25.6C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 16.384 1.024 32.768 3.072 49.152 80.896 109.568 210.944 181.248 358.4 181.248 245.76 0 444.416-198.656 444.416-444.416 0-134.144-59.392-253.952-152.576-334.848-29.696-7.168-61.44-10.24-93.184-10.24H439.296z"
                  fill="#A9D338" p-id="21699"></path>
                <path
                  d="M563.2 25.6H439.296C210.944 25.6 25.6 210.944 25.6 439.296v74.752c56.32 143.36 196.608 245.76 361.472 245.76 214.016 0 388.096-174.08 388.096-388.096 0-151.552-86.016-281.6-211.968-346.112z"
                  fill="#ADD63C" p-id="21700"></path>
                <path
                  d="M387.072 38.912c-33.792 0-67.584 5.12-98.304 14.336C215.04 81.92 151.552 132.096 105.472 194.56c-31.744 51.2-50.176 111.616-50.176 176.128 0 183.296 148.48 331.776 331.776 331.776s331.776-148.48 331.776-331.776S570.368 38.912 387.072 38.912z"
                  fill="#B1D941" p-id="21701"></path>
                <path d="M387.072 371.712m-275.456 0a275.456 275.456 0 1 0 550.912 0 275.456 275.456 0 1 0-550.912 0Z"
                      fill="#B4DD46" p-id="21702"></path>
                <path d="M387.072 371.712m-220.16 0a220.16 220.16 0 1 0 440.32 0 220.16 220.16 0 1 0-440.32 0Z"
                      fill="#B8E04B" p-id="21703"></path>
                <path
                  d="M512 365.568c-80.896-121.856-243.712-50.176-243.712 81.92 0 90.112 80.896 153.6 141.312 202.752 44.032 34.816 66.56 51.2 82.944 64.512 11.264 9.216 26.624 9.216 36.864 0 16.384-13.312 37.888-29.696 82.944-64.512 62.464-47.104 142.336-113.664 142.336-202.752 1.024-132.096-161.792-203.776-242.688-81.92z"
                  fill="#FFFFFF" opacity=".8" p-id="21704"></path>
              </svg>
              {{ scope.row.description }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button style="color: red" type="text" size="medium" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import './css/log.css'
import loginLogAPI from "../../api/monitoringmanagement/loginlog/loginLog"

export default {
  name: 'loginLog',
  computed: {
    dateTime: {
      get() {
        if (this.log.startTime && this.log.endTime) {
          return [this.log.startTime, this.log.endTime]
        } else {
          return []
        }
      },
      set(v) {
        this.log.startTime = v[0]
        this.log.endTime = v[1]
      }
    }
  },
  data() {
    return {
      loading: false,// 加载条
      log: {account: null, location: null, ip: null, startTime: null, endTime: null},
      currentPage: 1, //当前页
      pageSize: 5,  //一页几条
      total: 0,  //总条数
      logs: [], //分页数据
      multipleSelection: [],
      visible: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  methods: {
    lists() {
      this.loading = true
      loginLogAPI.selLogAll(this.currentPage, this.pageSize, this.log).then(({data}) => {
        this.logs = data.data.records
        this.total = data.data.total
        this.loading = false
      })
    },
    search() {
      this.loading = true
      this.lists();
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        loginLogAPI.delById(id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.lists()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    dels() {
      this.$confirm('此操作将永久删除选择的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        loginLogAPI.delByIds(this.multipleSelection).then(res => {
          if (res.data.code === 200) {
            if (res.data.message == "删除成功") {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
            } else {

              this.$message({
                message: res.data.message,
                type: 'warning'
              });
            }
          } else {
            this.$message.error(res.data.message);
          }
          this.lists()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.loading = true
      this.lists()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this.lists()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetForm(log) {
      this.$refs[log].resetFields();
      this.log.startTime = null
      this.log.endTime = null
    }
  },
  created() {
    this.loading = true
    this.lists();
  }
}
</script>

<style scoped>

</style>
